<template>
  <div class="home">
    <!-- <splitpanes :dbl-click-splitter="false" class="default-theme" @resize="paneResize">
      <pane min-size="20" :size="centerSize"></pane>

      <pane min-size="20" :size="centerSize">
        <splitpanes horizontal>
          <pane>2</pane>
          <pane>3</pane>
          <pane>4</pane>
        </splitpanes>
      </pane>
    </splitpanes> -->
    <div class="left">
      <div class="header">
        <i class="el-icon-document"></i>
        题目描述
      </div>
      <div class="left-con">
        <img src="@/assets/imgs/1.gif" alt="" />
        <mdRender :content="mdData"></mdRender>
      </div>
    </div>
    <div class="right">
      <div class="right-con">
        <div class="header">
          <i class="iconfont icon-code"></i>
          代码
          <div style="margin-left: 10px" class="run">
            <el-button @click="runClick" size="mini" icon="el-icon-video-play" type="primary">运行</el-button>
          </div>
        </div>
        <div class="code-sel">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link"> {{ lang }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item" v-for="item in langs" :key="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <codeEditor ref="codeEditorRef"></codeEditor>
      </div>
    </div>
  </div>
</template>
<script>
import mdRender from "@/components/mdRender";
import codeEditor from "@/components/editor";
import { mdData } from "@/model/md.js";
import { Message } from "element-ui";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

export default {
  name: "home",
  props: {},
  components: { mdRender, codeEditor },
  computed: {},
  data() {
    return {
      mdData: mdData.con,
      langs: ["JavaScript", "Python", "Python3", "Java", "C", "C++", "PHP", "Swift", "Kotlin", "Rust"],
      lang: "JavaScript",
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleCommand(command) {
      console.log(command);
      if (command !== "JavaScript") {
        Message.warning("正在支持中...");
        return;
      }
      this.lang = command;
    },
    runClick() {
      let codeCon = this.$refs.codeEditorRef.getCodeContext();
      try {
        const result = eval(codeCon); // 注意：eval 是危险的，仅用于信任的代码或教育目的。
        console.log(result); // 打印结果到控制台。
      } catch (error) {
        console.error(error); // 打印错误信息到控制台。
      }
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .left {
    width: 45%;
    background: #fff;
    border-radius: 6px;
    overflow: auto;
    .left-con {
      padding: 15px;
      img {
        width: 100%;
      }
    }
  }
  .right {
    width: 55%;

    .right-con {
      margin-left: 10px;
      background: #fff;
      height: 100%;
      border-radius: 6px;
      border: 1px solid #ddd;
    }
    .code-sel {
      padding: 10px;
      border-bottom: 1px solid #0000000f;
    }
  }
}
.header {
  height: 40px;
  background: #fafafa;
  display: flex;
  align-items: center;
  padding-left: 10px;
  border-radius: 6px 6px 0 0;
  i {
    font-size: 18px;
    margin-right: 5px;
    color: rgb(64, 158, 255);
  }
}
</style>
